<template>
  <div class="rule-group-add">
    <div class="breadcrumb">
      <Breadcrumb>
        <BreadcrumbItem to="/payroll/salary/rule">返回</BreadcrumbItem>
        <BreadcrumbItem to="/payroll/salary/rule/group">薪资组 /</BreadcrumbItem>
        <BreadcrumbItem>新增薪资组</BreadcrumbItem>
      </Breadcrumb>
    </div>

    <!-- step -->

    <!-- 步骤条 -->
    <div class="steps-wrap">
      <Steps :current="current">
        <Step title="基本设置"></Step>
        <Step title="设置计算规则"></Step>
        <Step title="关联计薪方案"></Step>
      </Steps>
    </div>

    <!-- step1 -->
    <div class="step-section none" :class="{block: current === 0}">
      <Form :model="formItem" :label-width="110">
        <div class="form-item-row2">
          <FormItem label="月计薪时长">
            <Input v-model="formItem.name" placeholder="薪资组名称" class="form-input"></Input>
          </FormItem>
          <div class="form-item-tip">如：上海分公司产品部门</div>
        </div>
        <div class="form-item-row2">
          <FormItem label="计算方式" class="form-item">
            <Button class="pierced-nobg">选择适用范围</Button>
          </FormItem>
        </div>
        <div class="form-item-row">
          <FormItem label="适用模板" class="form-item">
            <Select class="form-input">
              <Option value="beijing">模版</Option>
            </Select>
            <a href="javascript:" class="preview">预览</a>
          </FormItem>
        </div>
        <div class="form-item-row4">
          <Button class="pierced mr12" @click="prev" v-if="current > 0">上一步</Button>
          <Button class="save-btn-green" @click="next" v-if="current < 2">下一步</Button>
          <Button class="pierced mr12" @click="preview" v-if="current == 2">预览</Button>
          <Button class="save-btn-green" @click="next" v-if="current == 2">完成</Button>
        </div>
      </Form>
    </div>

    <!-- step2 -->
    <div class="step-section none step-section2" :class="{block: current === 1}">
      <Form :model="formItem" :label-width="160">
        <div class="form-item-row2">
          <FormItem label="薪资组名称">
            <Input v-model="formItem.name" placeholder="薪资组名称" class="form-input"></Input>
            <Tooltip placement="top">
                <Icon type="ios-help-circle" size="18" class="ml4" />
                <div
                  slot="content"
                  class="tooltip-custom "
                >即当月实际计薪的天数/小时，按照应出勤天数+法定节假日的天数折算。比如月应出勤为22天，有1天法定节假日。按照“实际出勤天数÷23”折算工资</div>
              </Tooltip>
          </FormItem>
        </div>
        <div class="form-item-row2">
          <FormItem label=" " class="form-item">
            月应出勤天数 x
 <Input v-model="formItem.name" placeholder="薪资组名称" class="form-input4"></Input>小时/天
          </FormItem>
        </div>
        <div class="form-item-row2">
          <FormItem label="计算方式">
           <Select class="form-input">
              <Option value="beijing">模版</Option>
              <Option value="beijing">模版</Option>
            </Select>
            <Tooltip placement="top">
                <Icon type="ios-help-circle" size="18" class="ml4" />
                <div
                  slot="content"
                  class="tooltip-custom "
                >反算即总工资减去考勤扣款后计算出员工当月工资。</div>
              </Tooltip>
          </FormItem>
          <div class="form-item-tip">按最低工资或固定金额计算请假扣款，暂不支持正算</div>
        </div>

        <div class="form-item-row2">
          <FormItem label="不在职工作日免发 ">
              <div for="" class="form-c-lable form-c-active">
                 基本工资
                 <span class="active-icon"></span>
              </div>
              <div for="" class="form-c-lable">
                 岗位工资
                 <span class="active-icon"></span>
              </div>
              <div for="" class="form-c-lable">
                 绩效工资
              </div>
              <div for="" class="form-c-lable">
                 季度奖
              </div>
          </FormItem>
        </div>

        <div class="form-item-row2">
          <FormItem label="转正、调薪月规则">
           <Select class="form-input">
              <Option value="beijing">模版</Option>
              <Option value="beijing">模版</Option>
            </Select>
            <Tooltip placement="top">
                <Icon type="ios-help-circle" size="18" class="ml4" />
                <div
                  slot="content"
                  class="tooltip-custom "
                >即调薪当月的工资按照调薪后的工资计算，假设企业的计薪周期是1-31号，调薪生效日为15号。本月1-31号都采用调薪后的工资计算</div>
              </Tooltip>
          </FormItem>
          <div class="form-item-tip">按正式工资/调薪后的工资计算，暂不支持正算</div>
        </div>
        <div class="form-item-row2">
          <FormItem label="计税规则">
           <Select class="form-input">
              <Option value="beijing">模版</Option>
              <Option value="beijing">模版</Option>
            </Select>
            
          </FormItem>
        </div>
        <div class="form-item-row4">
          <Button class="pierced mr12" @click="prev" v-if="current > 0">上一步</Button>
          <Button class="save-btn-green" @click="next" v-if="current < 2">下一步</Button>
          <Button class="pierced mr12" @click="preview" v-if="current == 2">预览</Button>
          <Button class="save-btn-green" @click="next" v-if="current == 2">完成</Button>
        </div>
      </Form>
    </div>

    <!-- step3 -->
    <div class="step-section none" :class="{block: current === 2}">
        <div class="tip emphasize" style="position: relative; display: block;">设置适用于此薪资组的计薪规则方案。薪资组内的人员在核算工资时，系统自动关联以下计薪规则方案进行计算。若没有相关规则方案无需选择。</div>
      <Form :model="formItem" :label-width="110">
        <div class="form-item-row2">
          <FormItem label="考勤计薪方案">
             <Select class="form-input">
              <Option value="beijing">模版</Option>
            </Select>
            <a href="" class="ml4">查看</a>
          </FormItem>
       
        </div>
        <div class="form-item-row2">
          <FormItem label="绩效工资方案" class="form-item">
              暂无可选方案~ 
          </FormItem>
        </div>
        <div class="form-item-row2">
          <FormItem label="提成方案" class="form-item">
              暂无可选方案~ 
          </FormItem>
        </div>
        <div class="form-item-row2">
          <FormItem label="奖金方案" class="form-item">
              暂无可选方案~ 
          </FormItem>
        </div>
        <div class="form-item-row2">
          <FormItem label="津补贴方案" class="form-item">
              暂无可选方案~ 
          </FormItem>
        </div>
        <div class="form-item-row2">
          <FormItem label="计件工资" class="form-item">
              暂无可选方案~ 
          </FormItem>
        </div>
        <div class="form-item-row2">
          <FormItem label="计时工资" class="form-item">
              暂无可选方案~ 
          </FormItem>
        </div>
        <div class="form-item-row4">
          <Button class="pierced mr12" @click="prev" v-if="current > 0">上一步</Button>
          <Button class="save-btn-green" @click="next" v-if="current < 2">下一步</Button>
          <!-- <Button class="pierced mr12" @click="preview" v-if="current == 2">预览</Button> -->
          <Button class="save-btn-green" @click="next" v-if="current == 2">完成</Button>
        </div>
      </Form>
    </div>
    <!-- bottom -->
    <!-- <div class="bottom-btns-wrap">
      <div class="btns">
  
        <Button class="pierced mr12" @click="prev" v-if="current > 0">上一步</Button>
        <Button class="save-btn-green" @click="next" v-if="current < 2">下一步</Button>
        <Button class="pierced mr12" @click="preview" v-if="current == 2">预览</Button>
        <Button class="save-btn-green" @click="next" v-if="current == 2">完成</Button>
      </div>
    </div>-->

    <!-- modal  -->
    <Modal v-model="modal2" width="720">
      <p slot="header">模板预览</p>
      <div>
        <Table width="100%" :columns="columns" class="table"></Table>
      </div>
      <p slot="footer"></p>
    </Modal>
    <!-- modal end -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      current: 0,
      formItem: {
        input: ""
      },
      modal2: false,
      columns: [
        {
          title: "姓名",
          key: "name"
        },
        {
          title: "工号",
          key: "age"
        },
        {
          title: "部门",
          key: "province"
        },
        {
          title: "岗位",
          key: "city"
        },
        {
          title: "工作性质",
          key: "city"
        },
        {
          title: "成员姓名",
          key: "city"
        },
        {
          title: "成员关系",
          key: "city"
        },
        {
          title: "工作单位",
          key: "city"
        },

        {
          title: "操作",
          key: "action",
          width: 120,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "text",

                    className: "table-action-btn"
                  },
                  class: "table-action-btn",
                  on: {
                    click: () => {
                      this.openRightCard(params.index);
                    }
                  }
                },
                "快速编辑"
              )
            ]);
          }
        }
      ],
      company: [
        {
          title: "基本工资",
          desc: ["基本工资", "餐补"]
        },
        {
          title: "基本工资",
          desc: ["基本工资", "餐补"]
        },
        {
          title: "基本工资",
          desc: ["基本工资", "餐补"]
        },
        {
          title: "基本工资",
          desc: ["基本工资", "餐补"]
        },
        {
          title: "基本工资",
          desc: ["基本工资", "餐补"]
        },
        {
          title: "基本工资",
          desc: ["基本工资", "餐补", "餐补", "餐补"]
        }
      ]
    };
  },
  methods: {
    next() {
      if (this.current == 2) {
        this.current = 0;
      } else {
        this.current += 1;
      }
    },
    prev() {
      if (this.current == 0) {
        this.current = 0;
      } else {
        this.current -= 1;
      }
    },
    preview() {
      this.modal2 = true;
    }
  }
};
</script>
<style lang="scss" scoped src='../../index.scss'>
</style>